<template>
	<view class="oil-details">
		<!--  -->
		<view class="deta-top">
			<image src="../../static/s_detail.png" mode="widthFix" class="image"></image>
			<view class="top-posi">
				<uni-icons type="back" size="40" @click="back()"></uni-icons>
				<text class="wz">{{oilName}}</text>
				<image src="../../static/w3.jpg" mode="widthFix" class="image1"></image>
			</view>
			<view class="top-bottom">
				<view class="bott-title flex">
					<text class="head-tit">{{oilName}}</text>
					<image src="../../static/s_detail.png" mode="" class="head-portrait"></image>
				</view>
				<view class="bott-address ">
					<view class="address-left">
						<text class="addre">{{address}}</text>
						<view class="addres">{{distance}}</view>
					</view>
					<view class="address-right">
						<view class="tu-icon">
							<uni-icons type="paperplane-filled" size="25"></uni-icons>
						</view>
						<view class="dah">导航</view>
					</view>
				</view>
				<view class="bott-bottom">
					<view class="co">
						<uni-icons type="shop" size="15"></uni-icons>
						<text>24小时营业</text>
					</view>
					<view class="">
						<uni-icons type="cart-filled" size="15"></uni-icons>
						<text>油站开发票</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 选项卡  -->
		<view class="tab-toggle">
			<!-- 内容 -->
			<view class="tab-content">
				<!-- 选项 -->
				<view class="tab-option">
					<dl v-for="(item,index) in option" :key="index" class='opt'   @click="dianji(index)" :class="[ currt== index ? 'active': '']" >
						<dt>{{item.name}}</dt>
						<dd></dd>
					</dl>
				</view>
				<!-- 选项内容 -->
				<view class="option-cont" v-show="currt==0">
					<!-- 标题1 -->
					<view class="option-tit">请选择油号 | 枪号</view>
					<!--  -->
					<view class="qiyou flex">
						<view class="tanchuang">
							<view class="tan">
								<text>92#</text>
								<uni-icons type="bottom" size="20"></uni-icons>
							</view>
							<view class="price">
								￥<text class="cheng">7.67</text>/L
								<uni-icons type="plus-filled"></uni-icons>
							</view>
						</view>
						<view class="oil-price">
							<view class="">油站价￥8.17/L</view>
							<view class="">国标价￥8.17/L</view>
						</view>
					</view>
					<view class="notes">加完返油金 <text class="oil-gold">0.05</text>/L </view>
					<!-- 标题二 -->
					<view class="option-tit">请选择枪号</view>
					<view class="gun-number flex">
						<view class="">请选择枪号</view>
						<uni-icons type="bottom"></uni-icons>
					</view>
					<!-- 标题三 -->
					<view class="option-tit">请输入金额</view>
					<view class="amount-of-money flex">
						<view class="hao">￥
							<input type="text" placeholder="请输入油机金额">
						</view>
						<view class="rise">0.00L</view>
					</view>
					<view class="preferential flex">
						<view class="preferential-item" v-for="(item,index) in preferential" :key="index">
							<view class="sum">￥{{item.sum}}</view>
							<view class="sum-discount">可优惠￥{{item.discount}}</view>
						</view>
					</view>
					<!--  -->
					<view class="refueling-coupon">
						<view class="cou-top">
							<view class="cou-left">
								<image src="../../static/yx.png" mode="widthFix" class="yyyy"></image>
								<view class="yuan">
									<view class="jjj">66元加油券</view>
									<view class="hhh">满200-22元加油券*3张；每月生效1张，31天内有效</view>
									<view class="kkk">
										随单购注意事项  <uni-icons type="forward" size="10"></uni-icons>
									</view>
								</view>
							</view>
							<view class="cou-right">
								<view class=""> ￥ <text>29.95</text> </view>
								<label class="radio">
									<radio value="" /><text></text>
								</label>
							</view>
						</view>
						<view class="cou-bottom flex">
							<view class="vvvv">￥0.00</view>
							<view class="zzzz">去支付</view>
						</view>
					</view>
					
					
					
					
					
				</view>
				<!--  -->
				<view class="option-cont" v-show="currt==1">
					<!-- 标题1 -->
					<view class="option-tit">油站保障</view>
					<!--  -->
					<view class="guarantee">
						<view class="guarantee-left">
							<uni-icons type="folder-add" size="25"></uni-icons>
						</view>
						<view class="guarantee-right">
							<view class="guarantee-tit">营业资质</view>
							<view class="guarantee-title">查看营业资质详情</view>
						</view>
					</view>
					<!--  -->
					<!-- 标题1 -->
					<view class="option-tit">车友印象</view>
					<view class="impression">
						<view class="impression-item" v-for="(item,index) in impression1" :key="index">{{item.name}}</view>
					</view>
				
				
				
				</view>
			
			</view>
		</view>
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				currt:0,
				
				oilName: '泰安服务区东区加油站',
				address: "山东省泰安市岱岳区太平街道京台高速K426,5+000泰安服务区东区",
				distance: "距4.22km  高速服务区",
				option: [{
					id: 1,
					name: '立即加油'
				}, {
					id: 2,
					name: '油站详情'
				}],
				preferential:[
					{
						sum:200,
						discount:'17.39',
					},
					{
						sum:300,
						discount:'12.01',
					},
					{
						sum:400,
						discount:'22.78',
					}
				],
				
				impression1:[
					{id:1,name:'支付快捷(3)'},
					{id:2,name:'油价便宜(2)'},
					{id:3,name:'加油量阻足(1)'},
					{id:4,name:'油品质量好(1)'},
					{id:5,name:'环境干净整洁(1)'},
					{id:6,name:'服务态度好(1)'},
				],
				
				
				

			}
		},
		onLoad() {

		},
		// 定义方法
		methods: {
			dianji:function(id){
				this.currt = id
			},
			back:function(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},


	}
</script>

<style>
	@import url('index.css');
</style>
